<template>
  <div id="addcategory_id">
    <el-dialog title="提示" :visible.sync="isShow.filg">
      <span slot="footer" class="dialog-footer">
        <el-form ref="form" :model="addcategory_list" label-width="80px" style="text-align: left">
          <el-form-item label="上级分类">
            <el-select v-model="addcategory_list.pid" placeholder="请选择分类">
              <el-option label="一级分类" :value="0"></el-option>
              <el-option
                :label="list.catename"
                :value="list.id"
                v-for="list in category_list"
                :key="list.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分类名称">
            <el-input v-model="addcategory_list.catename"></el-input>
          </el-form-item>

          <el-form-item label="分类图片" v-if="addcategory_list.pid != 0">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :on-change="handleAvatarChange"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="分类状态">
            <el-radio-group v-model="addcategory_list.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      addcategory_list: {
        id: 0,
        pid: 0,
        catename: "",
        img: "",
        status: 1
      }
    };
  },
  methods: {
      setcategory(obj){
          this.addcategory_list.id =obj.id
           this.addcategory_list.pid =obj.pid
            this.addcategory_list.catename =obj.catename
             this.addcategory_list.img =obj.img
              this.addcategory_list.status =obj.status
              this.imageUrl = "http://127.0.0.1:3000"+obj.img
      },
    close() {
      this.addcategory_list = {
        id: 0,
        pid: 0,
        catename: "",
        img: "",
        status: 1
      }
      this.isShow.filg=false
    },
    submit() {
      var sendData = new FormData();
      sendData.append("pid", this.addcategory_list.pid);
      sendData.append("catename", this.addcategory_list.catename);
      sendData.append("status", this.addcategory_list.status);
      sendData.append("img", this.addcategory_list.img);
      var url = "/cateadd";
      if(this.addcategory_list.id != 0){
           url = "/cateedit" 
           sendData.append('id',this.addcategory_list.id)
     }
      this.$http.post(url, sendData).then(res => {
        if (res.code === 200) {
          this.close();
          this.$emit("reloadCate");
        }
      });
    },
    handleAvatarChange(file) {
      //在elementui上传组件上，回调函数可以自动接受到修改后的图片对象
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addcategory_list.img = file.raw;
    },
    beforeAvatarUpload(file) {
      //官方代码，勿动！！！
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  props: ["isShow", "category_list"]
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>